<!DOCTYPE html>
<!-- saved from url=(0032)/goods-list.html -->
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <title>自媒体盈利平台</title>
    <meta property="qc:admins" content="4441727777670263757">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="http://localhost:8081/wxb/images/favicon.ico">
    <link rel="icon" type="image/gif" href="http://localhost:8081/wxb/images/favicon.gif">
    <link rel="stylesheet" type="text/css" href="./static/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./static/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./static/style-metronic.css">
    <link rel="stylesheet" type="text/css" href="./static/style.css">
    <!--[if IE 8]>
    <script type="text/javascript" src="/wxb/script/respond.min.js"></script>
    <![endif]-->

</head>

<body class="admin">
    <!-- top start-->


    <div class="header signup-header">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/index.html">
                    <img src="./static/logo.png" id="logoimg" alt="logo">
                </a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="menu-user dropdown">
                        <span class="sep"></span>
                        <span class="user-btn" id="dropdownMenu1" data-toggle="dropdown">
                            <i class="fa fa-user"></i>
                            qq123456
                        </span>
                        <span class="caret"></span>
                        <ul class="dropdown-menu user-box" role="menu" aria-labelledby="dropdownMenu1">
                            <li>
                                <a href="http://localhost:8081/user/setting"><i class="fa fa-user"></i> 我的资料 </a>
                            </li>
                            <li>
                                <a href="http://localhost:8081/user/logout"><i class="fa fa-power-off"></i> 注销用户 </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- top over-->
    <div class="page-container" style="min-height: 309px;">
        <div class="container">
            <div class="page-border">
                <div class="row">
                    <div class="col-xs-2 layout-left">
                        <!-- menu start-->

                        <div class="menu_box" id="menuBar">
                            <dl class="menu ">
                                <dt class="menu_title clickable  ">
                                    <a href="index.html">
                                        <i class="icon_menu fa fa-user"></i>用户中心
                                    </a>
                                </dt>
                            </dl>
                            <dl class="menu ">
                                <dt class="menu_title clickable selected">
                                    <a href="/goods-list.html">
                                        <i class="icon_menu fa fa-cubes"></i>产品及文案
                                    </a>
                                </dt>

                            </dl>
                            <dl class="menu ">
                                <dt class="menu_title clickable ">
                                    <a href="http://localhost:8081/zjy/index">
                                        <i class="icon_menu fa fa-cubes"></i>特色推广
                                    </a>
                                </dt>

                            </dl>
                            <dl class="menu">
                                <dt class="menu_title clickable ">
                                    <a href="my-orders.html">
                                        <i class="icon_menu fa fa-cubes"></i>我的订单
                                    </a>
                                </dt>
                            </dl>



                            <dl class="menu ">
                                <dt class="menu_title"><i class="icon_menu fa fa-pie-chart"></i>订单统计</dt>
                                <dd class="menu_item ">
                                    <a href="http://localhost:8081/report/goods">商品推广统计</a>
                                </dd>
                                <dd class="menu_item ">
                                    <a href="http://localhost:8081/report/channel">渠道推广统计</a>
                                </dd>
                            </dl>
                            <dl class="menu ">
                                <dt class="menu_title"><i class="icon_menu fa fa-cog"></i>资料设置</dt>
                                <dd class="menu_item ">
                                    <a href="http://localhost:8081/channel/list">渠道设置</a>
                                </dd>
                                <dd class="menu_item ">
                                    <a href="http://localhost:8081/user/setting">基本信息</a>
                                </dd>
                                <dd class="menu_item ">
                                    <a href="http://localhost:8081/user/reset">修改密码</a>
                                </dd>
                            </dl>
                            <dl class="menu ">
                                <dt class="menu_title clickable">
                                    <a href="http://localhost:8081/user/logout">
                                        <i class="icon_menu fa fa-power-off"></i>退出登录
                                    </a>
                                </dt>
                            </dl>
                        </div>
                        <!-- menu over-->
                    </div>

                    <div class="col-xs-10 layout-right min-height-1">
                        <style>
                            .goodsList_table .cover {
                                width: 150px;
                                margin-top: 3px;
                            }

                            .goodsList_table .goods-link {
                                font-size: 16px;
                                padding-bottom: 10px;
                                display: inline-block;
                            }

                            .goodsList_table em {
                                font-style: normal;
                                color: #666666;
                                font-weight: bold;
                            }

                            .tag-type1.tag-type1-4:hover {
                                color: #f49800;
                                border-color: #f49800;
                            }

                            .tag-type1.tag-type1-4.active {
                                color: #fff;
                                background-color: #f49800;
                                border-color: #f49800;
                            }

                            .tag-type1.tag-type1-3:hover {
                                color: #e72980;
                                border-color: #e72980;
                            }

                            .tag-type1.tag-type1-3.active {
                                color: #fff;
                                background-color: #e72980;
                                border-color: #e72980;
                            }

                            .tag-type1.tag-type1-2:hover {
                                color: #7dbe26;
                                border-color: #7dbe26;
                            }

                            .tag-type1.tag-type1-2.active {
                                color: #fff;
                                background-color: #7dbe26;
                                border-color: #7dbe26;
                            }

                            .tag-type1.tag-type1-1:hover {
                                color: #dd0000;
                                border-color: #dd0000;
                            }

                            .tag-type1.tag-type1-1.active {
                                color: #fff;
                                background-color: #dd0000;
                                border-color: #dd0000;
                            }
                        </style>
                        <h2 class="page-title"><em>产品及文案</em></h2>
                        <div id="app">
                            <div class="top-area clearfix"> 
                                <form id="listForm">
                                    <select class="select-style-1" v-model="searchMap.data.sellerId">
                                        <option v-for="(item, index) in cus" :value="item.customerId">{{item.customerName}}</option>
                                    </select>
                                    <!-- 一级标题 -->
                                    <select class="select-style-1" v-model="searchMap.data.category1Id" >
                                        <option v-for="cat  in  cat1" :label="cat.name" :value="cat.id"></option>
                                    </select>
                                    <!-- 二级标题 -->
                                    <select class="select-style-1" v-model="searchMap.data.category2Id">
                                        <option v-for="cat  in  cat2" :label="cat.name" :value="cat.id"></option>
                                    </select>
                                    <!-- 三级标题 -->
                                    <select class="select-style-1" v-model="searchMap.data.category3Id">
                                        <option v-for="cat  in  cat3" :label="cat.name" :value="cat.id"></option>
                                    </select>
                                    <select class="select-style-1" name="type_id" v-model="searchMap.data.brandId">
                                        <option v-for="cat  in  brand" :label="cat.name" :value="cat.id"></option>
                                    </select>
                                    <div class="pull-right search_div">
                                        <div class="input-group">
                                            <input type="text" name="alisaname" value="" id="alisaname"
                                                v-model="searchMap.data.goodsName" class="form-control"
                                                placeholder="商品名称关键字">
                                            <span class="input-group-btn">
                                                <button @click.prevent="searchByAll()" class="btn red search_btn"
                                                    type="submit">搜索</button>
                                            </span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="margin-top-10">
                                <table id="goodsList" class="table table-advance table-cps table-hover goodsList_table">
                                    <thead>
                                        <tr>
                                            <th>商品名称</th>
                                            <th width="170">商品品牌</th>
                                            <th width="170">商品图片</th>

                                            <th class="text-center" width="180">商城价</th>

                                            <th class="text-center" width="140">推广详情</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                        <tr v-for="(item, index) in goodsList" :key="index">
                                            <td>{{item.goodsName}}</td>
                                            <td>{{item.brandId}}</td>
                                            <td width="170"><img v-for="(items, index) in item.smallPic" :src="items[index]"/></td>
                                            <td class="text-center">￥{{item.price}}</td>
                                            <td class="text-center"><a @click="lookGoods(item.id)">查看商品详情</a></td>
                                        </tr>

                                    </tbody>
                                </table>
                                <!--翻页-->
                                <div class="grid-pagination-wrap text-center clearfix show">
                                    <div class="jogger">
                                        <a @click.prevent="search(item),searchMap.page=item"
                                            v-for="item in size">第{{item}}页</a>
                                        <a href="javascript:void(0);">{{total}}条记录</a>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- footer start-->


    <div class="right-service closed">
        <img class="RS-img" src="./static/wxb.png">
        <div class="RS-wrap">
            <div class="RS-title">@在线客服<span class="RS-title-right-btn"><i class="fa fa-angle-right"></i></span></div>
            <div class="RS-title-for-closed"><i class="fa fa-ellipsis-h"></i><br>在线客服</div>
            <ul class="RS-ul">
                <li class="RS-i1"><a
                        href="tencent://message/?uin=123456789&amp;Site=wxb.com&amp;Menu=yes">合作咨询<br><span>小强</span></a>
                </li>
                <li class="RS-i2"><a
                        href="tencent://message/?uin=123456789&amp;Site=wxb.com&amp;Menu=yes">异常订单<br><span>小薇</span></a>
                </li>
                <li class="RS-i3"><a
                        href="tencent://message/?uin=123456789&amp;Site=wxb.com&amp;Menu=yes">财务返款<br><span>小丽</span></a>
                </li>
            </ul>
            <div class="RS-bottom">400-123-1234</div>
        </div>
    </div>

    <div class="copyright">
        <div class="container text-center">
            <p>
                <span class="copyright-icon copyright-icon-1"><img src="./static/copyright-pic-1.jpg" width="94"></span>
                <span class="copyright-icon copyright-icon-2"><img src="./static/copyright-pic-2.jpg" width="94"></span>
                <span class="copyright-icon copyright-icon-3"><img src="./static/copyright-pic-3.jpg"
                        width="117"></span>
                <span class="copyright-icon copyright-icon-4"><img src="./static/copyright-pic-4.jpg"
                        width="109"></span>
            </p>
            <p>
                Copyright ? 2015
            </p>
            <p>
                客服电话：400-123-1234
            </p>

        </div>
    </div>
    <div id="topcontrol" style="position: fixed; bottom: 110px; right: 10px; opacity: 0; cursor: pointer; "
        title="返回顶部">
        <div class="back-to-top"></div>
    </div>

    <!-- cnzz 统计开始
<div style='display:none'>
<script type="text/javascript">
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_307679'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/stat.php%3Fid%3D307679' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
 cnzz 统计结束-->
    <!-- footer over-->


    <script type="text/javascript" src="./static/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="./static/bootstrap.min.js"></script>
    <script type="text/javascript" src="./static/underscore-min.js"></script>
    <script type="text/javascript" src="./static/back-to-top.js"></script>
    <script type="text/javascript" src="./static/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="./static/win.js"></script>
    <script type="text/javascript" src="./static/app.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#listForm .select-style-1').change(function () {
                $('.search_btn').click();
            });
            $('#js-sel-tag .tag-type1').click(function () {
                var tagId = $(this).attr('data-id');
                $(this).addClass('active').siblings().removeClass('active');
                $('#tag_id').val(tagId);
                $('.search_btn').click();
            })
        });

    </script>

    <script type="text/javascript">
        jQuery(document).ready(function () {
            App.init();
        });
    </script>
    <script src="./js/vue/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script>
        axios.defaults.timeout = 5000;   // 超时时间
        axios.defaults.baseURL = "http://localhost:8086/";  // baseURL   

        axios.interceptors.request.use(function (config) {
            //设置jwt令牌
            config.headers.token = sessionStorage.getItem("token")
            config.withCredentials = false
            return config;
        });
        axios.interceptors.response.use(response => {            
            return response=response.data;
        });
        

        var socket = null;

        var vm = new new Vue({
            el: "#app",
            data: {
                searchMap: {
                    page: "1",
                    limit: 5,
                    data:{

                    }
                },
                treeNode:[],
                total: 0,
                goodsList: {
                    smallPic:[]
                },
                brand:[],
                cat1:[],
                cat2:[],
                cat3:[],
                size: 0,
                cus:[]
            },
            methods: {
                //分页
                search() {                  
                    axios.post("goods/search",this.searchMap).then(res => {
                            this.total = res.total;
                            this.goodsList = res.data;
                            res.data.forEach(element => {
                                this.goodsList.smallPic=eval(element.smallPic)
                            });
                            //计算size（总页数）
                            this.size = Math.ceil(this.total / this.searchMap.limit)
                    })
                },
                //跳转页面
                lookGoods(id){
                    location.href="goods-detail.html?id="+id
                },
                //查询商家
                selectCus(){
                    axios.post("goods/cus",this.searchMap).then(res => {
                            this.cus=res
                    })
                },
                //查询类目
                selectCat(parentId){
                    axios.post("goods/cat?parentId="+parentId).then(res => {
                        this.cat1=res
                    })
                },
                //查询品牌
                selectBrand(){
                    axios.post("goods/brand").then(res => {
                        this.brand=res
                    })
                },
                searchByAll(){                    
                    this.search()
                }
            },
            created() {//页面加载
                this.search();
                this.selectCus();
                this.selectCat(0);
                this.selectBrand()
                if(!sessionStorage.getItem("token")){
                    location.href="/login.html"
                }
            },watch:{
                'searchMap.data.category1Id':{
                    handler: function(newVal,oldVale) {
                        this.cat3=[]
                        this.cat2=[]
                        axios.post("goods/cat?parentId="+newVal).then(res => {
                        this.cat2=res
                        })
                    }
                },
                'searchMap.data.category2Id':{
                    handler: function(newVal,oldVale) {
                        axios.post("goods/cat?parentId="+newVal).then(res => {
                        this.cat3=res
                        })
                    }
                },


            }
            
        })
    </script>



    <div id="topcontrol" title="返回顶部" style="position: fixed; bottom: 110px; right: 10px; opacity: 0; cursor: pointer;">
        <div class="back-to-top"></div>
    </div>
</body>

</html>